<template>
  <div>
    <div style="margin-bottom: 20px;">
      <div class="j_item_title" style="margin-bottom: 15px;">
        {{yongHuData.username}}&nbsp;<span style="font-size:15px;font-weight:100;">( 状态: {{yongHuData.isprohibit ? "禁用":"良好"}}
          )&nbsp;( 预警数: {{yongHuData.warningcount}} )</span>
      </div>
      <div class="j_user">
        身份证号: {{yongHuData.idcard}}
      </div>
      <div class="j_user">
        联系电话: {{yongHuData.phone}}
      </div>
      <div class="j_user">
        地址: {{yongHuData.regionName}}{{yongHuData.streetName}}{{yongHuData.juweiName}}
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="12">
          <el-tabs v-model="queryData.Type" @tab-click="handleClick">
            <el-tab-pane label="全部" name="2"></el-tab-pane>
            <el-tab-pane label="话题" name="0"></el-tab-pane>
            <el-tab-pane label="评论" name="1"></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <div>
        <ul>
          <li v-for="(item,index) in dataList" :key="index" class="j_item">
            <div class="j_item_context" style="color:#333;text-indent: 2em;padding-right:280px;word-break: break-word;">{{item.content}}</div>
            <div v-if="item.themeType == 1" class="j_item_context">评论话题: {{item.themeTitle}}</div>
            <div>

            </div>
            <div class="j_right_btn" style="top:20px;width:280px;">
              <el-button v-if="item.status != 2" type="primary" size="mini" @click="zhanXian(item.id,true)">展现</el-button>
              <el-button v-else type="info" size="mini" @click="zhanXian(item.id,false)">不展现</el-button>
              <el-button v-if="!item.isRecommend && item.themeType == 0" type="success" size="mini" @click="tuiJian(item.id,true)">推荐</el-button>
              <el-button v-else-if="item.isRecommend && item.themeType == 0" type="info" size="mini" @click="tuiJian(item.id,false)">取消推荐</el-button>
              <el-button type="warning" size="mini" @click="handleDelect(item.id)">删除</el-button>
            </div>
          </li>
        </ul>
      </div>
      <div style="text-align:right;margin:15px 0;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryData.PageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="queryData.PageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    GetMySelfThemeOrThemeReply,
    deleteTheme,
    UpdateThemeStatus,
    UpdateThemeRecommend
  } from "@/api/Theme.js"
  import {
    GetUserInfo
  } from "@/api/user.js"
  export default {
    data() {
      return {
        yongHuData: null,
        dataList: [],
        queryData: {
          userId: "",
          Type: "2",
          PageIndex: 1,
          PageSize: 10
        },
        total: 0,
        userName: ""
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        this.userName = this.$route.query.userName;
        this.queryData.userId = this.$route.query.userId;
        this.getData();
        this.userData();
      },
      userData() {
        GetUserInfo({
          UserName: this.userName
        }).then(res => {
          this.yongHuData = res.data
        })
      },
      getData() {
        GetMySelfThemeOrThemeReply(this.queryData).then(res => {
          this.dataList = res.data.list
          this.total = res.data.total
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.getData();
      },
      zhanXian(val, isPass) {
        UpdateThemeStatus({themeId: val,type: 0,isPass: isPass}).then(res=>{
          this.getData();
          this.userData();
        })

      },
      tuiJian(val, IsRecommend) {
        UpdateThemeRecommend({themeId: val,type: 0,IsRecommend: IsRecommend}).then(res=>{
          this.getData();
          this.userData();
        })

      },
      handleDelect(val) {
        this.$confirm("此操作将永久删除 , 是否继续?", "提示", {
          type: "warning"
        }).then(_ => {
          deleteTheme({themeId: val, type: 0}).then(res=>{
              this.getData();
              this.userData();
          })
        });
      },
      handleSizeChange(val) {
        this.queryData.PageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.queryData.PageIndex = val;
        this.getData();
      }
    }
  };
</script>

<style scoped>
  .j_user {
    font-size: 15px;
    line-height: 1.5em;
    color: #333;
  }
</style>
